<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item><span @click="$router.back()">项目列表</span></el-breadcrumb-item>
      <el-breadcrumb-item>{{$route.query.id?'修改项目':'新增项目'}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="levelSecond">
      <h3>基础信息</h3>
      <div class="levelThird">
        <el-form  label-width="100px" :inline='true' :model="projectInfo">
          <el-form-item label='项目标题' required>
            <el-input v-model='projectInfo.title' placeholder="请输入项目标题"></el-input>
          </el-form-item>
          <el-form-item label='项目描述' required>
            <el-input style="width: 400px;" v-model='projectInfo.describe' placeholder="请输入项目描述"></el-input>
          </el-form-item> <br>
          <el-form-item label="项目时间" required>
              <el-col :span="10">
                <el-form-item style="margin-right: 0;" prop="startTime">
                  <el-date-picker  type="date" format="yyyy 年 MM 月 dd 日" value-format="timestamp" placeholder="开始时间" v-model="projectInfo.startTime" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col style="text-align: center;" :span="2">-</el-col>
              <el-col :span="11">
                <el-form-item prop="endTime">
                  <el-date-picker type="date" @change='selEndTime' format="yyyy 年 MM 月 dd 日" value-format="timestamp" placeholder="结束时间" v-model="projectInfo.endTime" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <br>
            <el-form-item label=" ">
              <el-upload
                class="upload-demo"
                drag
                action="/api/uploadFile"
                :on-success='fileSuccess'
                :before-upload="beforeUpload"
                :headers='{Authorization:header}'
                :on-change='beforeUpload'
                ref='upload'
                :auto-upload='false'
                :multiple='false'
                >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传<span style="color: #409eff;">xls</span>或<span style="color: #409eff;">xlsx</span>格式文件,且不超过100M
                <el-button type="text" @click="downLoadExcel" style="margin-left: 15px;">点击下载文档模板</el-button>
                </div>
              </el-upload>
            </el-form-item>
        </el-form>
      </div>
    </div>
    <div style="text-align: end;margin-top: 30px;">
      <el-button type="primary" style="width: 80px;" @click="creationProject">提交</el-button>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import {time} from "../../util/axios.js"
  export default{
    name:'creationproject',
    data(){
      return{
        projectInfo:{
          title:'',
          describe:'',
          startTime:'',
          endTime:'',
          file:null,
          // info:{
          //   infoValue:[]
          // },
          // task:[]
        },
        isGetInfo:false,
        getInfoItemValue:'',
        header:Cookies.get('token'),
        defaultProps: {
          children: 'children',
          label: function initLabel(data,node){
            return data.children? data:data['content']
          }
        },
        editPreFlag:false,
        editInfo:{},
        editInfoStr:'',
        pickerOptions:{
          disabledDate(time) {
            return time.getTime()< Date.now()-86400000;
          },
        },
        obj:{}
      }
    },
    methods:{
      beforeUpload(file,fileList){
        let reg=/.*(xls|xlsx)$/
        if(!reg.test(file.name)) {
          this.$message.error('请上传xls或xlsx格式的文件')
          return false
        }else{
          this.$refs.upload.uploadFiles=[]
          this.$refs.upload.uploadFiles.push(file)
        }
      },
      addGetIofoItem(){
        if(this.getInfoItemValue=='') return this.$message.warning('请填写需要收集的字段名称')
        let obj={}
        obj[this.getInfoItemValue]=''
        for(let item of this.projectInfo.info.infoValue){
          if(Object.keys(item)[0]==this.getInfoItemValue) {
            return this.$message.warning('请勿填写重复字段')
          }
        }
        this.projectInfo.info.infoValue.push(obj)
        this.getInfoItemValue=''
      },
      removeGetInfo(index){
        this.projectInfo.info.infoValue.splice(index,1)
      },
      async initEditInfo(){
        let result = await this.$get('/api/project/'+this.$route.query.id)
        result.data.startTime=new Date(result.data.startTime).getTime()
        result.data.endTime=new Date(result.data.endTime).getTime()
        Object.keys(result.data).map(item=>{
          this.projectInfo[item]=result.data[item]
        })
        if(this.projectInfo.info.infoValue.length>0) this.isGetInfo=true
      },
      fileSuccess(res){
        this.projectInfo.task=res.data
      },
      removePre(node,data){
        let task=this.projectInfo.task
        for(let item in task){
          if(data.children){
            if(task[item].id==data.id){
              task.splice(item,1)
              break
            }
          }else{
            if(task[item].id==data.parentId){
              for(let items in task[item].children){
                if(task[item].children[items].id==data.id){
                  task[item].children.splice(items,1)
                  break
                }
              }
            }
          }
        }
      },
       creationProject(){
        this.$confirm('确认提交该项目？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                }).then(async () => {
                  if(this.projectInfo.startTime>this.projectInfo.endTime){
                     return this.$message.warning('请选择正确的时间段')
                  }
                  // console.log(this.$refs.upload)
                  this.projectInfo.file=this.$refs.upload.uploadFiles[0].raw
                  let formdata=new FormData()
                  this.obj={}
                  Object.assign(this.obj,this.projectInfo)
                  this.obj.startTime=time(this.obj.startTime)
                  this.obj.endTime=time(this.obj.endTime)
                  Object.keys(this.obj).map(item=>{
                    formdata.append(item,this.obj[item])
                  })
                  if(this.obj.title==''||this.obj.describe==''||this.obj.startTime==''||this.obj.startTime==''||this.obj.file==null)return this.$message.warning('请完善基础信息')
                  const loading = this.$loading({lock:true,text:'提交项目中...',spinner: 'el-icon-loading'})
                  let result =await this.$post('/api/new/project',formdata)
                  if(result!=undefined&&result.code==200){
                    this.$message.success(result.msg)
                    this.$router.push('/home/project')
                    this.$store.commit('removeAnalogueTab',"/home/creationProject")
                  }
                  loading.close()
                })
      },
      openEditOPre(data){
        this.editInfo=data
        this.editInfoStr= this.editInfo.children?this.editInfo.title:this.editInfo.content
        this.editPreFlag=true
      },
      editPreInfo(){
        this.editInfo.children?this.editInfo.title=this.editInfoStr:this.editInfo.content=this.editInfoStr
        this.editPreFlag=false
      },
      selEndTime(val){
        if(val<this.projectInfo.startTime) {
          this.projectInfo.endTime=''
          this.$message.warning('结束日期不能在开始日期之前')
          return
        }
      },
      async downLoadExcel(){
        let res=this.$down('/api/project/download/excel',{fileType:'文档模板.xlsx'})
        console.log(res)
        if(res.code==200){

        }
      }
    },
    mounted(){
      if(this.$route.query.id) {
        this.initEditInfo()
      }
    }
  }
</script>

<style scoped lang="scss">
  .levelSecond,.levelThird{
    margin-left: 30px;
    margin-top: 30px;
  }
  .tags{
    margin-right: 10px;
  }
  .getInfoBox{
    border: 1px solid #999;
    padding: 20px;
    .getInfoBoxItem{
      width: 50%;
      box-sizing: border-box;border: 1px solid #999;
      margin: 0;
      padding: 10px 20px;
    }
    .getInfoBoxItem:nth-child(2n+1){
      border-left: 0;
    }
    .getInfoBoxItem:nth-of-type(n+4){
      border-top: 0;
    }
  }
  .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
      width: 100%;
      >span{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 50%;
      }
    }
</style>
